<template>
  <el-dialog
    :model-value="modelValue"
    :title="title"
    :width="isMobile ? '95%' : width"
    :fullscreen="isMobile && fullscreenOnMobile"
    :close-on-click-modal="false"
    @update:model-value="updateVisible"
    @close="handleClose"
  >
    <div class="mobile-form-container" :class="{ 'is-mobile': isMobile }">
      <slot></slot>
    </div>
    
    <template #footer>
      <div class="dialog-footer" :class="{ 'mobile-footer': isMobile }">
        <slot name="footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" :loading="loading" @click="handleConfirm">
            确定
          </el-button>
        </slot>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue'
import { useAppStore } from '@/stores/app'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '600px'
  },
  loading: {
    type: Boolean,
    default: false
  },
  fullscreenOnMobile: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel', 'close'])

const appStore = useAppStore()
const isMobile = computed(() => appStore.device === 'mobile')

const updateVisible = (value) => {
  emit('update:modelValue', value)
}

const handleConfirm = () => {
  emit('confirm')
}

const handleCancel = () => {
  emit('cancel')
  emit('update:modelValue', false)
}

const handleClose = () => {
  emit('close')
}
</script>

<style lang="scss" scoped>
.mobile-form-container {
  &.is-mobile {
    padding: 0;
    
    :deep(.el-form) {
      .el-form-item {
        margin-bottom: 20px;
        
        .el-form-item__label {
          line-height: 1.4;
          padding-bottom: 8px;
        }
        
        .el-form-item__content {
          line-height: 1.4;
        }
      }
      
      .el-input,
      .el-select,
      .el-textarea {
        width: 100%;
      }
      
      .el-input__inner,
      .el-textarea__inner {
        font-size: 16px; /* 防止iOS缩放 */
      }
    }
  }
}

.dialog-footer {
  &.mobile-footer {
    display: flex;
    gap: 12px;
    
    .el-button {
      flex: 1;
      height: 44px;
      font-size: 16px;
    }
  }
}

/* 移动端对话框样式优化 */
:deep(.el-dialog) {
  @media (max-width: 768px) {
    margin: 0;
    
    .el-dialog__header {
      padding: 16px 20px;
      
      .el-dialog__title {
        font-size: 18px;
      }
    }
    
    .el-dialog__body {
      padding: 20px;
      max-height: calc(100vh - 120px);
      overflow-y: auto;
    }
    
    .el-dialog__footer {
      padding: 16px 20px;
    }
  }
}
</style>
